<template>
	<view class="AddPet">
		<AppNavbar :bgColor="'transparent'" titlecolor="black" :fontWeight="600" leftIconColor="#000"></AppNavbar>
		<up-popup :show="true" @close="close" @open="open">
			<view class="AddPet-main">
				<text class="AddPet-main-text">Add a pet</text>
				<view class="AddPet-main-image">
					<view class="AddPet-main-image-item" v-for="(item, index) in 2" @click="state.key = index">
						<view class="AddPet-main-image-item-image" :class="{ 'active': state.key == index }">
							<image src="../../static/image/dog.png" mode=""></image>
						</view>

						<!-- <button>cat</button> -->
						<view class="text" :class="{ 'active': state.key == index }">
							cat
						</view>

					</view>
				</view>
				<view class="AddPet-main-bottom">
					<up-button type="primary" text="Next step"
						color="linear-gradient(179.82deg, rgba(78,198,205,1) 0%,rgba(53,203,174,1) 52.08%)"
						@click="nextFun"></up-button>

					<text class="more">More pets</text>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
import { reactive } from 'vue'
let state = reactive({
	key: 0
})
const nextFun = () => {
	console.log('wdf')
	// 跳过登录
	// goto('/pages/MyPet/MyPet')
	// ===
	uni.showLoading({
		title: 'Is linking',
		success() {
			setTimeout(() => {
				uni.hideLoading()
			}, 1500)
		}
	})
}
const goto = (ulr) => {
		uni.$to(ulr)
	}
</script>

<style lang="scss">
.AddPet {
	width: 100vw;
	height: 100vh;
	background-image: url('/static/image/petBg.png');
	background-size: cover;

	background-position: center center;

	.AddPet-main {
		// border: 1px solid red;
		min-height: 250px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;

		.AddPet-main-text {
			font-weight: 600;
			font-size: 32rpx;
		}

		.AddPet-main-image {

			display: flex;
			justify-content: space-evenly;
			width: 100%;

			.AddPet-main-image-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.AddPet-main-image-item-image {
					// background-color: #35cbae;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 150rpx;
					height: 150rpx;

					image {
						// background-color: #35cbae;
						width: 135rpx;
						height: 135rpx;
						// border-radius: 50%;
					}
				}

				// justify-content: space-between;


				.text {
					border: 1px solid #dfdfdf;
					padding: 5rpx 40rpx;
					border-radius: 25rpx;
					margin-top: 20rpx;

				}

			}

			.active {
				color: #fff;
				background-color: #35cbae;
				font-weight: 600;
			}
		}

		.AddPet-main-bottom {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 150px;


			.more {
				// color: ;
				color: #46a0f9;
				font-weight: 600;
				margin-top: 20rpx;
			}


			// border: 1px solid red;
		}
	}
}
</style>